<%@page import="java.util.ArrayList"%>
<%@page import="com.mconnect.msurvey.controller.PlanManager"%>
<%@page import="com.mconnect.msurvey.model.SurveyPlan"%>
<%@page import="java.util.List"%>
<%@page import="com.mconnect.msurvey.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Panel Admina</title>
  <link rel="stylesheet" href="resources/css/ap.css">
  <link rel="stylesheet" href="js/jQuery/themes/base/jquery.ui.all.css">
  <link rel="stylesheet" href="js/jQuery/demos.css">
  <link rel="stylesheet" href="resources/css/detail_style.css">
  <link rel="stylesheet" type="text/css" href="resources/css/search_grid_style.css" />
  
	<script src="js/jQuery/jquery-1.8.2.js"></script>
	<script src="js/jQuery/ui/jquery.ui.core.js"></script>
	<script src="js/jQuery/ui/jquery.ui.widget.js"></script>
	<script src="js/jQuery/ui/jquery.ui.tabs.js"></script>
	<script src="js/jQuery/ui/jquery.ui.datepicker.js"></script>
	
	<style>
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		th#plan { border: 1px solid #eee; padding: .6em 10px; text-align: left; text-align: center; height: 30px;}
		td#plan { border: 1px solid #eee; padding: .2em 2px; text-align: left; text-align: center; height: 30px;}
	</style>
  
  </head>
<script>
	$(function() {
		$('.ui-tabs-search .search-adv-button').click(function(){$('#search-adv-form').toggle();});
		$( "#datepicker1" ).datepicker();
		$( "#datepicker2" ).datepicker();
		$( "#tabs" ).tabs({
			beforeLoad: function( event, ui ) {
				ui.jqXHR.error(function() {
					ui.panel.html(
						"Niestety, ale nie udało się załadować tej strony. " +
						"Spróbuj ponownie." );
				});
			}
		});
	});
</script>
<body>
<div id="top">
   
    <div class="sessionUser">
    	<div id="logoMconnect">
    		<img src="resources/images/top_logo.gif" width="84" height="59" alt="image001"/>
    	</div>
    	<div id="mConnect_txt">
        	mConnect<br/>al. Jana Pawła II 41c<br/>31-864 Kraków
       </div>
    	
	     <% User admin = (User)session.getAttribute("admin"); 
			if(admin == null){ %>
				<jsp:forward page="loginAdminForm.jsp"></jsp:forward>
		<%}%>
    </div>
    <img src="resources/images/kreska.png" class="kreska">
    <div class="header_txt">
      <a href="adminPanel.jsp" style="text-decoration: none;">
     		<p class="header_txt_1">mSurvey</p>
      		<p class="header_txt_2">Panel Administratora</p>
      	</a>
    </div>
    <ul id=menu>
      
    <li><s:a action="goToSearchSurvey"> Wyszukaj ankietę </s:a></li>
	<li><s:a action="goToCampaigns">Kampanie</s:a></li>
	<li><s:a action="goToRegisterUser">Dodaj ankietera</s:a></li>
	<li><s:a action="goToConfirmList">Potwierdziły przybycie</s:a></li>
	<li><s:a action="goToReports">+Raporty+</s:a></li>
	<li style="float: right"><s:a action="logoutAdmin">Wyloguj</s:a></li>
    </ul>
    
    <div id=kategorie>
    
    <div style="float: left; width: 96%; margin-left: 2%;">
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Raport kampani</a></li>
				<li><a href="reports/userSurveyReport.jsp">Raport pojedynczego ankietera</a></li>
<!-- 				<li><a href="reports/allUsersReport.jsp">Raport wszystkich ankieterów</a></li> -->
				<li><a href="reports/dateReport.jsp">Raport wszystkich ankieterów</a></li>
				<li><a href="reports/costReport.jsp">Raport kosztów</a></li>
				<li><a href="reports/hrReport.jsp">Raport działu HR</a></li>
				<li><a href="reports/summaryCostReport.jsp">Zestawienie kosztów</a></li>
			</ul>
			
			<div id="tabs-1">
			
				<script type="text/javascript">
					$(function() {
					$('#choosePlan').click(function(){
							var id_plan = $( "#cost_id_plan" ).val();
							var dateFrom = $( "#datepicker1" ).val();
							var dateTo = $( "#datepicker2" ).val();
							var agree = $( "#agree" ).val();
							$.get(
									'reports/campaignReport.jsp',
									{
										id_plan: id_plan, dateFrom : dateFrom, dateTo: dateTo, agree : agree
									},
									function (content) {
										$('#content').html(content);
										return false;
									}
								);
						});
					});
				</script>
			
				<% PlanManager pM = new PlanManager();
					List<SurveyPlan> planList = new ArrayList<SurveyPlan>();
					planList = pM.getPlanList();
				%>
						<center>
						<div id="content1" style=" margin-top: 30px; margin-bottom: 30px; width: 915px; font-size: 12px; ">
							<div id="page" class="ui-tabs ui-widget" style="width:915px;">
								<ul class="ui-tabs-nav ui-tabs-search">
									<li style="border: 0; width: 350px;  text-align: center;"><h3>Raport z kampani</h3></li>
									<li class="search-bottom">
										<span class="fll hint note request-time" style="margin-top: 9px;">Kampania</span>
										<a href="#" class="search-adv-button fll"><span class="ui-icon ui-icon-carat-1-s"></span></a>
										<select id="cost_id_plan" name="id_plan"  style="float:left; margin-top: 7px; width:200px;">
										<% for(SurveyPlan plan : planList){ %> 
													<option value="<%=plan.getId_plan() %>"><%= plan.getPlanName() %></option>
												<%} %>	
										</select>
										<a href="#" id="choosePlan" class="search-button fll"><span class="ui-icon ui-icon-search"></span></a>
									</li>
								</ul>
								<div class="clear"></div>
								<div id="search-adv-form" class="form search-form" style="display:none">
									<div class="wide">
										<table >
											<tr>
												<td><label class="note" style="margin-top:3px;">Data</label></td>
												<td><input type="text" id="datepicker1" ></td>
												<td>-</td>
												<td><input type="text" id="datepicker2" ></td>
												<td>&nbsp</td>
												<td ><label class="note" style="margin-top:3px; width: 200px;">Zgoda marketingowa</label></td>
												<td>
													<select id="agree">
														<option value="all">Wszystkie</option>
														<option value="TAK">TAK</option>
														<option value="NIE">NIE</option>
													</select>
												</td>
											</tr>
										</table>
									</div>
								</div>
								<div class="clear"></div>
								<div class="search-label"></div>
								<div class="clear"></div>
								<div id="paging_container" class="container">
								<div id="reload" class="ui-overlay" style="display: none;"><div class="ui-widget-overlay"></div></div>
									
									<div class="clear"> </div>
									<div class="info_text hint note fll"> </div>
									<div class="page_navigation frr"> </div>
								</div>
								<div class="clear"></div>
							</div><!-- page -->
						</div>
						<div id="content">
						
						</div>
				</center>
				
			</div>
		</div>
   </div>
 </div>	 
</div>
 </body>
</html>